/* 
 * Virtual Bank System - Base CSS
 * Base styles and variables
 */

:root {
  /* Color Scheme */
  --primary-color: #1a3a8f;       /* Deep Blue */
  --secondary-color: #3d85c6;     /* Light Blue */
  --accent-color: #ff9900;        /* Orange */
  --success-color: #52c41a;       /* Green */
  --warning-color: #faad14;       /* Yellow */
  --error-color: #f5222d;         /* Red */
  --info-color: #1890ff;          /* Blue */
  
  /* Text Colors */
  --title-color: #333333;
  --text-color: #666666;
  --light-text: #999999;
  
  /* Background Colors */
  --bg-color: #f5f5f5;
  --card-bg: #ffffff;
  --border-color: #dddddd;
  --divider-color: #eeeeee;
  
  /* Shadows */
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --modal-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  
  /* Border Radius */
  --border-radius-lg: 8px;
  --border-radius-md: 4px;
  --border-radius-sm: 2px;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.5;
  background-color: var(--bg-color);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--title-color);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--primary-color);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}
